<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/page/common/taglib.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">	 
<title></title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

.addWrap{ position:relative; width:100%;background:#fff;margin:0; padding:0;}
.addWrap .swipe{overflow: hidden;visibility: hidden;position:relative;}
.addWrap .swipe-wrap{overflow:hidden;position:relative;}
.addWrap .swipe-wrap > div {float: left;width: 100%;position:relative;}
#position{ position:absolute; bottom:0; right:0; padding-right:8px; margin:0; background:#000; opacity: 0.4; width:100%; filter: alpha(opacity=50);text-align:right;}
#position li{width:10px;height:10px;margin:0 2px;display:inline-block;-webkit-border-radius:5px;border-radius:5px;background-color:#AFAFAF;}
#position li.cur{background-color:#FF0000;}
.img-responsive { display: block; max-width:100%;height: auto;}
</style>
<script src='js/app/hhSwipe.js' type="text/javascript"></script> 
</head>
<style>
html,body {
	height:100%;
	width:100%;
}
.nav_img {
	width: 100%;
	height: 100%;
}
.nav_img:ACTIVE {
	width: 90%;
	height: 90%;
	position:relative;
	top:5%;
	left:5%;
}
</style>
<body style="background: #222222">
<div class="addWrap" id="scroll">
	<div class="swipe" id="mySwipe">
		<div class="swipe-wrap">
			<div><a href="javascript:;"><img class="img-responsive" src="images/app/banner.png"/></a></div>
			<div><a href="javascript:;"><img class="img-responsive" src="images/app/banner1.png" /></a></div>
			<div><a href="javascript:;"><img class="img-responsive" src="images/app/banner2.png"/></a></div>
		</div>
	</div>
	<ul id="position">
		<li class="cur"></li>
		<li></li>
		<li></li>
	</ul>
</div><!--/addWrap--> 
<div id="content" style="position:absolute;top:0px;bottom:0px;left:0px;width:100%;">
<div style="height: 42%;width:48%;background-color: #E84638;float: left;margin: 1%;">
<a href="app/hotStation">
<img class="nav_img" src="images/app/red.png">
</a>
</div>
<div style="height: 20%;width:48%;background-color: #01BA9A;float: left;margin: 1%;">
<a href="http://www.qiushibaike.com/">
<img class="nav_img" src="images/app/green.png">
</a>
</div>
<div style="height: 42%;width:48%;background-color: #F5B002;float: right;margin: 1%;">
<a href="app/hotBusLine">
<img class="nav_img" src="images/app/yello.png">
</a>
</div>
<div style="height: 20%;width:48%;background-color: #8F5CD1;float: right;margin: 1%;">
<a href="feedback">
<img class="nav_img" src="images/app/blue.png">
</a>
</div>
<div style="height: 32%;width:98%;background-color: #0282F2;float: right;margin: 1%;">
<a href="http://map.baidu.com/mobile/webapp/index/index">
<img class="nav_img" src="images/app/blue_.png">
</a>
</div>
</div>
<script type="text/javascript">
<!-- 设置content充满剩下的内容 -->
window.onload = function(){
        var scroll_height = document.getElementById("scroll").offsetHeight;
		document.getElementById("content").style.top=scroll_height+"px";
}
var bullets = document.getElementById('position').getElementsByTagName('li');
var banner = Swipe(document.getElementById('mySwipe'), {
	auto: 4000,
	continuous: true,
	disableScroll:false,
	callback: function(pos) {
		var i = bullets.length;
		while (i--) {
			bullets[i].className = ' ';
		}
		bullets[pos].className = 'cur';
	}
})
</script>
</body>
</html>